import React, { Component } from 'react'
import '../assets/css/goodsdetail.css'
import qs from 'qs'
import {cartAdd} from '../request/cart_request'
import Header from "../components/HeadAssembly"
export default class GoodsDetail extends Component {
    state = {
        goods: {

        },
        carid:""
    }
    get_goods(id) {
        this.$axios.get("/getgoodsinfo?id=" + id).then(res => {
            this.setState({ goods: res.list[0] })
        })
    }
    UNSAFE_componentWillMount() {
        const { id } = qs.parse(this.props.location.search.substring(1))
        this.get_goods(id)
        this.setState({carid:id})
    }
     //购物车添加
     addCar(goodsid,type=1){
         console.log(goodsid)
        cartAdd(goodsid,type,1).then(res=>{
            // console.log(res)
           if(res.code == 200){
            this.props.restCarList()
           }
        })
    }
    render() {
        const { goods,carid } = this.state
        return (
            <div className="goods-container">
                < Header title="商品详情"/>
                <div className="detail">
                    <img src={this.$static_host + goods.img} alt="" />
                    <div>
                        <h3 className="price">&yen;{goods.price}</h3>
                        <p>{goods.goodsname}</p>
                    </div>
                </div>
                <ul className="cartbar">
                    <li>
                        <div className="icon icon-concat"></div>
                        <p>客服</p>
                    </li>
                    <li>
                        <div className="icon icon-shop"></div>
                        <p>店铺</p>
                    </li>
                    <li onClick={()=>this.props.history.push("/cart")}>
                        <div className="icon icon-cart"></div>
                        <p >购物车</p>
                    </li>
                    <li className="btn-cart" onClick={()=>this.addCar(carid,1)}>
                        加入购物车
                    </li>
                    <li className="btn-buy">
                        立即购买
                    </li>
                </ul>
            </div>
        )
    }
}
